<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <textarea name="" id="" rows="10" cols="30">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaasssssssssssssssssssvvvvv
        bbbbbffggggggggggggggggggggggggggggggggggggggggg
        sssssssssssssssscccccccccccccccccccccccccccccccc
    </textarea>
    <br>
    <button disabled>已阅读用户协议(30)</button>
    <script>
        let i=30
        const a=document.querySelector('button')
        let time =setInterval(function(){
            i--
            a.innerHTML =`已阅读用户协议(${i})`
            if(i === 0){
                clearInterval(time)
                a.innerHTML='同意'
                a.disabled =false
            }
        },3000)
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .box {
      width: 560px;
      height: 400px;
      background-color: pink;
    }

    img {
      width: 100%;
      height: 320px;
      display: block;
    }

    .bottom {
      height: 80px;
      background-color: green;
      padding: 10px 10px 0 10px;
    }

    .bottom p {
      margin: 0;
      color: white;
      margin-bottom: 10px;
    }

    .bottom-ul {
      width: 150px;
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      justify-content: space-between;
      align-items: center;
    }

    .bottom-ul li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    li.lihover {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="../../../../images/webapi/第一单元/slider01.jpg" alt="">
    <div class="bottom">
      <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
      <ul class="bottom-ul">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>

  <script>

    const sliderData = [
      { url: '../作业图片/images/course01.png', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: '../作业图片/images/course02.png', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: '../作业图片/images/course03.png', title: '真正的jo厨出现了!', color: 'rgb(36, 31, 33)' },
      { url: '../作业图片/images/course04.png', title: '快来分享你的寒假日常吧~', color: 'rgb(139, 98, 66)' },
      { url: '../作业图片/images/course05.png', title: '李玉刚:让世界通过B站看到东方大国文化', color: 'rgb(67, 90, 92)' },
      { url: '../作业图片/images/course06.png', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: '../作业图片/images/course07.png', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: '../作业图片/images/course08.png', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]

    const ran = Math.floor(Math.random() * sliderData.length)
    // console.log(sliderData[ran])

    //图片
    const pic = document.querySelector('img')
    pic.src = sliderData[ran].url

    //p文本
    const p = document.querySelector('p')
    p.innerHTML = sliderData[ran].title

    //背景颜色
    const bc = document.querySelector('.bottom')
    bc.style.backgroundColor = sliderData[ran].color

    //小圆点
    const li = document.querySelector(`li:nth-child(${ran + 1})`)
    li.classList.add('lihover')
    pic++;if(pic>=sliderData.length){
        pic=0;
    }
    setInterval()

  </script>

</body>

</html>